<template>
  <div class="list">
    <div class="chan-ye-da-shu-ju">
      <div class="top">
        <div class="left">
          <div class="date">{{ date }}</div>
        </div>
        <div class="center">
          <div class="title">{{ title }}</div>
        </div>
        <div class="right">
          <div class="update-date">{{ updateDate }}</div>
          <div class="exit">
            <ali-icon icon="iconquanping" class="card-mark"/>
            <el-button type="text" @click="big"> 全屏</el-button>
          </div>
        </div>
      </div>
      <div class="content">
        <div class="left">
          <div class="content-left-box">
            <dv-border-box-7
                :color="['#558FB5', '#6DB7E8']"
                style="box-shadow: none"
            >
              <div class="title">园区产业趋势</div>
              <!-- <total-advantage :data="data.parkTrend" type="parkTrend"/> -->
              <mian-ji :data="data.parkTrend" />
            </dv-border-box-7>
          </div>
          <div class="content-left-box">
            <dv-border-box-7
                :color="['#558FB5', '#6DB7E8']"
                style="box-shadow: none"
            >
              <div class="title">意向企业</div>
              <advantage
                  :data="data.parkPurpose"
                  type="parkPurpose"
                  :header="['公司名', '年产值', '年税收']"
              />
            </dv-border-box-7>
          </div>
        </div>
        <div class="center">
          <div class="content-center-box">
            <div class="left" v-if="data.parkData">
              <div class="title">{{ data.parkData[0].title }}</div>
              <div class="number">
                <span class="span-box">{{ data.parkData[0].num }}</span>
              </div>
            </div>
            <div class="center" v-if="data.parkData">
              <div class="title">{{ data.parkData[1].title }}</div>
              <div class="number">
                <span class="span-box">{{ data.parkData[1].num }}</span>
              </div>
            </div>
            <div class="right" v-if="data.parkData">
              <div class="title">{{ data.parkData[2].title }}</div>
              <div class="number">
                <span class="span-box">{{ data.parkData[2].num }}</span>
              </div>
            </div>
          </div>
        </div>
        <div class="right">
          <div class="content-right-box">
            <dv-border-box-7
                :color="['#558FB5', '#6DB7E8']"
                style="box-shadow: none"
            >
              <div class="title">入驻企业税收动态</div>
              <!-- <total-advantage :data="data.parkDynamic" type="parkDynamic"/> -->
              <mian-ji-shui-shou :data="data.parkDynamic" />
            </dv-border-box-7>
          </div>
          <div class="content-right-box">
            <dv-border-box-7
                :color="['#558FB5', '#6DB7E8']"
                style="box-shadow: none"
            >
              <div class="title">入驻企业产值预测</div>
              <advantage
                  :data="data.parkForecast"
                  type="parkForecast"
                  :header="['公司名', '年税收', '行业']"
              />
            </dv-border-box-7>
          </div>
        </div>
      </div>
      <div class="bottom">
        <div class="left">
          <dv-border-box-7
              :color="['#558FB5', '#6DB7E8']"
              style="box-shadow: none"
          >
            <div class="title" style="float:left">园区年度数据</div>
            <!-- <total-advantage :data="data.parkYear" type="parkYear"/> -->
            <bar :data="data.parkYear" />
          </dv-border-box-7>
        </div>
        <div class="right">
          <dv-border-box-7
              :color="['#558FB5', '#6DB7E8']"
              style="box-shadow: none"
          >
            <div class="title">园区产业分布</div>
            <!-- <scale :industry-data="data.parkIndustry" :typeData="data.parkCompanyType" />-->
            <bing-zhuang :industry-data="data.parkIndustry" :typeData="data.parkCompanyType" />
          </dv-border-box-7>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Advantage from "./components/Advantage"
import SubdivisionDataV from "./components/SubdivisionDataV"
import TotalAdvantage from "./components/TotalAdvantage"
import Scale from "./components/Scale"
import {all} from "@/api/data/park"
import BingZhuang from "./components/BingZhuang"
import MianJi from "./components/MianJi"
import Bar from "./components/Bar"
import MianJiShuiShou from "./components/MianJiShuiShou"
import { currentTime, currentHis } from "@/utils/tools"

export default {
  components: {
    Advantage,
    SubdivisionDataV,
    TotalAdvantage,
    Scale,
    BingZhuang,
    MianJi,
    Bar,
    MianJiShuiShou
  },
  mounted() {
    this.timer = setInterval(() => {
      this.date = currentTime()
      this.updateDate = `数据更新时间：${currentHis()}`
    }, 1000)
  },
  data() {
    return {
      data: [],
      date: '2020年9月27日 星期一 14:42:47',
      title: '园区大数据',
      updateDate: '数据更新时间：14:43:13'
    }
  },
  created() {
    this.search()
  },
  methods: {

    big() {
      this.fullscreen()
      this.$router.push({
        name: 'data/park/screen',
        path: 'data/park/screen'
      })
    },
    fullscreen() {
      var el = document.documentElement;
      var rfs =
          el.requestFullScreen ||
          el.webkitRequestFullScreen ||
          el.mozRequestFullScreen ||
          el.msRequestFullScreen;

      //typeof rfs != "undefined" && rfs
      if (rfs) {
        rfs.call(el);
      } else if (typeof window.ActiveXObject !== "undefined") {
        //for IE，这里其实就是模拟了按下键盘的F11，使浏览器全屏
        var wscript = new ActiveXObject("WScript.Shell");
        if (wscript != null) {
          wscript.SendKeys("{F11}");
        }
      }
    }
    // 查询数据
    , search() {
      all((response) => {
        this.data = response.data
      })
    }
  }
}
</script>

<style lang="scss" scoped>
@import "@/styles/data/park/index";

.echarts {
  width: 100%;
  height: 100%;
}

.chats {
  width: 300px;
  height: 200px;
}
</style>
